<template>
	<view class="news">
		<view class="tab">
			<view class="tablist" v-for="(item ,index) in tablist" :key="index" @click="goTabItem(index)" :style="{color:(item.showLeft?'#fff':'#D9D9D9')}">
				<view class="leftIcon" :style="{color:(item.showLeft?'#fff':'#47578E')}">
					|
				</view>
				<view class="name">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="item" v-for="(item,index) in list">
			<view class="msg" v-if="type == 1 ">
				{{item.realname}}给你推送了一条消息
			</view>
			<view class="center">
				<view class="icon">
					<image :src="item.project_logo" mode="" class="image"></image>
				</view>
				<view class="entityList">
					<view class="name">
						项目名称：{{item.project_name}}
					</view>
					<view class="num">
						项目编号：{{item.project_no}}
					</view>
				</view>
			</view>
			<view class="bot">
				<view class="time">
					时间：{{item.createtime}}
				</view>
				<view class="details" @click="goDetails(item.id)">
					查看详情
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		pushMsgList,
		receiveMsgList
	} from '@/request/api.js'
	export default {
		data() {
			return {
				tablist: [{
						name: '我的推送',
						showLeft: true
					},
					{
						name: '我的接收',
						showLeft: false
					}
				],
				type:0,
				list: [{
						name: '瑞能电力瑞能电力瑞能电力瑞能电力瑞能电力瑞能电力瑞能电力瑞能电力瑞能电力瑞能电力',
						msg: '陈波给你推送了一条消息',
						id: 1,
						bh: 'ABCD65343434',
						time: '2023-01-10 12:24',
						icon: '../../static/icon/my/six.png'
					},
					{
						name: '瑞能电力瑞能电力瑞能电力瑞能电力瑞能电力瑞能电力瑞能电力瑞能电力瑞能电力瑞能电力',
						msg: '陈波给你推送了一条消息',
						id: 1,
						bh: 'ABCD65343434',
						time: '2023-01-10 12:24',
						icon: '../../static/icon/my/six.png'
					}
				]
			};
		},
		onLoad(e) {
			this.pushMsgList()
		},
		methods: {
			async pushMsgList() {
				let res = await pushMsgList()
				this.list = res.data.list
			},
			async receiveMsgList() {
				let res = await receiveMsgList()
				this.list = res.data.list
			},
			goTabItem(tabIndex){
				this.type = tabIndex
				this.tablist.forEach((item,index)=>{
					tabIndex==index?item.showLeft=true:item.showLeft=false
				})
				if(tabIndex==1){
					this.receiveMsgList()
				}else{
					this.pushMsgList()
				}
			},
			goDetails(id) {
				uni.navigateTo({
					url: `/my_pages/news/newsDetails?id=${id}&type=${this.type}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.news {
		font-size: 28rpx;
		display: flex;
		flex-direction: column;
		padding: 30rpx;

		.tab {
			display: flex;
			/* justify-content: space-evenly; */
			background: #47578E;
			color: #D9D9D9;
			height: 72rpx;
			line-height: 72rpx;
			margin-left: -30rpx;
			margin-right: -30rpx;
			margin-top: -30rpx;
			margin-bottom: 20rpx;
		.tablist {
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 1;

			.leftIcon {
				margin-right: 15rpx;
			}

			.name {}
		}
	}

	.active{
		color: #47578E;
	}
	.item {
		box-shadow: 1px 1px 5px #88888869;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		margin-bottom: 20rpx;

		.msg {
			color: #47578E;
			font-weight: 500;
			margin: 12rpx 0;
		}

		.center {
			display: flex;
			color: #505050;
			margin: 15rpx 0;
			border-bottom: 0.5px solid rgba(217, 217, 217, 0.3);
			padding-bottom: 15rpx;
			box-sizing: border-box;

			.icon {
				width: 72rpx;
				height: 72rpx;

				.image {
					width: 100%;
					height: 100%;
				}
			}

			.entityList {
				flex: 1;
				display: flex;
				flex-direction: column;
				overflow: hidden;
				text-overflow: ellipsis;

				.name {
					margin-left: 15rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.num {
					margin-left: 15rpx;
					margin-top: 5rpx;
				}
			}
		}

		.bot {
			display: flex;
			justify-content: space-between;
			margin: 12rpx 0;

			.time {
				color: #979797;
				font-size: 26rpx;
			}

			.details {
				color: #555EDE;
				color: #555EDE;
				border: 1px solid;
				padding: 6rpx 24rpx;
				border-radius: 28rpx;
			}
		}
	}
	}
</style>